﻿<html>
<head>
    <meta charset="utf-8">
    <title>列表页</title>
    <meta name="keywords" content="blog"/>
    <meta name="description" content="blog"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--    <link-->
<!--            href="https://unpkg.com/md-editor-v3@2.2.0/lib/style.css"-->
<!--            rel="stylesheet"-->
<!--    />-->
<!--    <link-->
<!--            href="https://cdn.bootCSS.com/github-markdown-CSS/2.10.0/github-markdown.min.css"-->
<!--    />-->
    <link href="https://cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/editormd/css/editormd.css">
    <link href="/css/base.css" rel="stylesheet">
    <link href="/css/m.css" rel="stylesheet">
    <script src="/js/jquery-1.8.3.min.js"></script>
<!--    <script src="/js/comm.js"></script>-->
    <script src="/js/modernizr.js"></script>
    <script src="/editormd/lib/marked.min.js"></script>
    <script src="/editormd/lib/prettify.min.js"></script>
    <script src="/editormd/lib/raphael.min.js"></script>
    <script src="/editormd/lib/underscore.min.js"></script>
    <script src="/editormd/lib/sequence-diagram.min.js"></script>
    <script src="/editormd/lib/flowchart.min.js"></script>
    <script src="/editormd/lib/jquery.flowchart.min.js"></script>
    <script src="/editormd/editormd.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <script src="https://unpkg.com/md-editor-v3@2.2.0/lib/md-editor-v3.umd.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>-->

    <style>
        /*.el-row {*/
        /*    margin-bottom: 20px;*/

        /*&*/
        /*:last-child {*/
        /*    margin-bottom: 0;*/
        /*}*/

        /*}*/
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            /*background: #e5e9f2;*/
            background: rgba(95, 92, 255, 0);
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        #comment a {
            color: #00a8c6;
        }
    </style>


    <!--    <script src="/js/marked.min.js"></script>-->

</head>
<body>
<!--top begin-->
<div id="app">
    <header id="header">
        <div class="navbox">
            <h2 id="mnavh"><span class="navicon"></span></h2>
            <div class="logo"><a href="#">乐享平台</a></div>
            <nav>
                <ul id="starlist">
                    <li><a href="/toIndex">首页</a></li>
                    <li><a href="/list">文章</a></li>
                    <li class="menu"><a href="../../templates/list2.html">资源共享</a>
                        <ul class="sub">
                            <li><a href="/6">文档</a></li>
                            <li><a href="/7">音乐</a></li>
                            <li><a href="/8">视频</a></li>
                            <li><a href="/7">软件</a></li>
                            <li><a href="/8">笔记</a></li>
                        </ul>
                        <span></span></li>
                    <li><a href="/about">个人中心</a></li>
                    <li><a href="/write"><i class="el-icon-edit-outline" style="color: white;font-size: 35px;padding-top: 10px;"></i></a></li>
                    <!--        <li><a href="daohang.html"></a></li>-->
                    <!--        <li><a href="about.html">关于我</a></li>-->
                </ul>
            </nav>
            <div class="searchico"></div>
        </div>
    </header>
    <div class="searchbox">
        <div class="search">
            <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
                <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词"
                       style="color: rgb(153, 153, 153);"
                       onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                       onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
                <input name="show" value="title" type="hidden">
                <input name="tempid" value="1" type="hidden">
                <input name="tbname" value="news" type="hidden">
                <input name="Submit" class="input_submit" value="搜索" type="submit">
            </form>
        </div>
        <div class="searchclose"></div>
    </div>
    <!--top end-->
    <article>
        <!--lbox begin-->
        <div class="lbox">
            <div class="whitebg lanmu">
                <img v-if="articleDTO.article.image != ''" :src="articleDTO.article.image">
                <h1>{{articleDTO.article.title}}</h1>
                <p>{{articleDTO.article.introduction}}</p>
            </div>
            <div class="whitebg bloglist">
                <h2 class="htitle">文章</h2>
                <div>
                    <li>
                        <div  style="width: 90%;padding-left: 5%" v-html="articleDTO.content">

<!--                            {{articleDTO.content}}-->
<!--                            <textarea style="display:none;" v-text="articleDTO.content"></textarea>-->
<!--                            <p id="editormd1" v-text="articleDTO.content"></p>-->
                            <!--                    <markdown-to-html :markdown-value="this.a"></markdown-to-html>-->
                            <!--                            <textarea style="display: none" name="test-editormd-markdown-doc"></textarea>-->
                        </div>
                    </li>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content bg-purple-light">
                                <div style="text-align: center;height: 36px;width:80px;vertical-align: center;padding-left: 175px">
                                    <img width="20px" height="20px" src="/img/unlike.png" style="margin:0 auto;padding: 8px;vertical-align: middle;float: left"
                                         v-if="!articleDTO.like"
                                         @click="thumbup(articleDTO.article.id,null,null)" class="w-6"/>
                                    <img width="20px" height="20px" src="/img/like.png" style="margin:0 auto;padding: 8px;vertical-align: middle;float: left"
                                         v-if="articleDTO.like"
                                         @click="delthumbup(articleDTO.article.id,null,null)"
                                         class="iconM"/>
                                    <span style="float:left;line-height: 36px">{{articleDTO.article.thumbup}}</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-button type="text" @click="open3(articleDTO.article.user.id,'0')">
                            <div class="grid-content bg-purple-light">
                                <div style="text-align: center;height: 36px;width:80px;vertical-align: center;padding-left: 175px">
                                    <img src="/img/comment.png" width="20px" height="20px"
                                         style="margin:0 auto;padding: 8px;vertical-align: middle;float: left">
                                    <span style="float:left;line-height: 36px;color: #000000;">{{articleDTO.article.comment}}</span>
                                </div>
                            </div>
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div id="comment" class="whitebg bloglist" style="float: contour;">
                <h2 class="htitle">评论</h2>
                <template :name="index" v-if="commentDTOs.length != 0" v-for="(commentDTO,index) in commentDTOs">
                    <div style="width: 780px;height: auto;float: left;padding: 15px;border-radius: 4px;margin: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                        <div style="height: auto;">
                            <div style="margin-bottom: 5px;float: bottom;">
                                <p style="float: bottom;display: flex;align-items: center;"><i class="avatar"><img
                                        :src="commentDTO.user.avatar"></i>
                                    <span>&nbsp;&nbsp;{{commentDTO.user.username}}&nbsp;&nbsp;</span><span
                                            style="color: #00aaaa;size: 4px;">{{commentDTO.publishDate}}</span>
                                    <!--                                    <span>【<a href="/">{{commentDTO.columnname}}</a>】</span>-->
                                </p>
                            </div>
                            <div style="height: auto;padding: 10px;margin-left: 60px;">{{commentDTO.content}}
                                <div style="float: right;">
                                    <p style="float: bottom;display: flex;align-items: center;">
                                        <el-button type="text" @click="open3(commentDTO.user.id,commentDTO._id)"><a>回复&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></el-button>
                                        <i><img width="20px" height="20px" src="/img/unlike.png"
                                                v-if="!commentDTO.like"
                                                @click="thumbup1(commentDTO._id,index,null)" class="w-6"/></i>
                                        <i><img width="20px" height="20px" src="/img/like.png"
                                                v-if="commentDTO.like"
                                                @click="delthumbup1(commentDTO._id,index,null)"
                                                class="iconM"/></i><span>&nbsp;{{commentDTO.thumbup}}</span>
                                    </p>
                                </div>
                            </div>
                            <template v-for="(son,indexSon) in commentDTO.sons">
                                <ol>
                                    <div style="height: auto;padding: 10px;margin-left: 60px;">
                                        <div>
                                            <div>
                                                <a href="/">{{son.user.username}}</a>&nbsp;回复&nbsp;<a href="/">{{son.acceptUser.username}}:&nbsp;</a>{{son.content}}<br/>
                                            </div>
                                            <div style="float: right;">
                                                <p style="float: bottom;display: flex;align-items: center;">
                                                    <el-button type="text" @click="open3(son.user.id,commentDTO._id)"><a>回复&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></el-button>
                                                    <i><img width="20px" height="20px" src="/img/unlike.png"
                                                            v-if="!son.like"
                                                            @click="thumbup1(son._id,index,indexSon)"
                                                            class="w-6"/></i>
                                                    <i><img width="20px" height="20px" src="/img/like.png"
                                                            v-if="son.like"
                                                            @click="delthumbup1(son._id,index,indexSon)"
                                                            class="iconM"/></i><span>&nbsp;{{son.thumbup}}</span>
                                                </p>
                                            </div>
                                            <div>
                                                <p style="color: #00aaaa;size: 4px;">{{son.publishDate}}</p>
                                            </div>
                                        </div>

                                    </div>

                                </ol>
                            </template>
                        </div>
                    </div>
                </template>
                <template v-if="commentDTOs.length == 0" >
                    <div style="width: 800px;height: 250px;text-align: center">
                        <h2 style="line-height: 250px;color: #00aaaa;">暂无评论!</h2>
                    </div>
                </template>
            </div>
        </div>
        <!--bloglist end-->
        <div class="rbox">
            <div class="whitebg paihang">
                <h2 class="htitle">点击排行</h2>
                <section class="topnews imgscale"><a href="/"><img
                        src="/images/h1.jpg"><span>6条网页设计配色原则,让你秒变配色高手</span></a></section>
                <ul>
                    <li><i></i><a href="/">十条设计原则教你学会如何设计网页布局!</a></li>
                    <li><i></i><a href="/">用js+css3来写一个手机栏目导航</a></li>
                    <li><i></i><a href="/">6条网页设计配色原则,让你秒变配色高手</a></li>
                    <li><i></i><a href="/">三步实现滚动条触动css动画效果</a></li>
                    <li><i></i><a href="/">个人博客，属于我的小世界！</a></li>
                    <li><i></i><a href="/">安静地做一个爱设计的女子</a></li>
                    <li><i></i><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></li>
                    <li><i></i><a href="/">做个人博客如何用帝国cms美化留言增加头像选择</a></li>
                </ul>
            </div>
            <div class="whitebg tuijian">
                <h2 class="htitle">本栏推荐</h2>
                <section class="topnews imgscale"><a href="/"><img
                        src="/images/h2.jpg"><span>6条网页设计配色原则,让你秒变配色高手</span></a></section>
                <ul>
                    <li><a href="/"><i><img src="/images/text01.jpg"></i>
                        <p>十条设计原则教你学会如何设计网页布局!</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text02.jpg"></i>
                        <p>用js+css3来写一个手机栏目导航</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text03.jpg"></i>
                        <p>6条网页设计配色原则,让你秒变配色高手</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text04.jpg"></i>
                        <p>三步实现滚动条触动css动画效果</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text05.jpg"></i>
                        <p>个人博客，属于我的小世界！</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text06.jpg"></i>
                        <p>安静地做一个爱设计的女子</p>
                    </a></li>
                    <li><a href="/"><i><img src="/images/text07.jpg"></i>
                        <p>个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</p>
                    </a></li>
                </ul>
            </div>
            <div class="ad whitebg imgscale">
                <ul>
                    <a href="/"><img src="/images/ad.jpg"></a>
                </ul>
            </div>
            <div class="whitebg cloud">
                <h2 class="htitle">标签云</h2>
                <ul>
                    <a href="" target="_blank">个人博客模板</a> <a href="" target="_blank">css动画</a> <a href=""
                                                                                                  target="_blank">布局</a>
                    <a
                            href="" target="_blank">今夕何夕</a> <a href="" target="_blank">SEO</a> <a href=""
                                                                                                   target="_blank">女程序员</a>
                    <a
                            href="" target="_blank">小世界</a> <a href="" target="_blank">个人博客</a> <a href=""
                                                                                                   target="_blank">网页设计</a>
                </ul>
            </div>
            <div class="whitebg wenzi">
                <h2 class="htitle">猜你喜欢</h2>
                <ul>
                    <li><a href="/">十条设计原则教你学会如何设计网页布局!</a></li>
                    <li><a href="/">用js+css3来写一个手机栏目导航</a></li>
                    <li><a href="/">6条网页设计配色原则,让你秒变配色高手</a></li>
                    <li><a href="/">三步实现滚动条触动css动画效果</a></li>
                    <li><a href="/">个人博客，属于我的小世界！</a></li>
                    <li><a href="/">安静地做一个爱设计的女子</a></li>
                    <li><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></li>
                    <li><a href="/">做个人博客如何用帝国cms美化留言增加头像选择</a></li>
                </ul>
            </div>
            <div class="ad whitebg imgscale">
                <ul>
                    <a href="/"><img src="/images/ad02.jpg"></a>
                </ul>
            </div>
            <div class="whitebg tongji">
                <h2 class="htitle">站点信息</h2>
                <ul>
                    <li><b>建站时间</b>：2018-10-24</li>
                    <li><b>网站程序</b>：帝国cms</li>
                    <li><b>主题模板</b>：<a href="#" target="_blank">《今夕何夕》</a></li>
                    <li><b>文章统计</b>：299条</li>
                    <li><b>文章评论</b>：490条</li>
                    <li><b>统计数据</b>：<a href="/">百度统计</a></li>
                </ul>
            </div>
        </div>
    </article>

    <footer>
        <div class="box">
            <div class="wxbox">
                <ul>
                    <li><img src="/images/wxgzh.jpg"><span>微信公众号</span></li>
                    <li><img src="/images/wx.png"><span>我的微信</span></li>
                </ul>
            </div>
            <div class="endnav">
                <p><b>站点声明：</b></p>
                <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
                <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a
                        href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=HHh9cn95b3F1cHVye1xtbTJ-c3E"
                        target="_blank">dacesmiling@qq.com</a></p>
                <p>Copyright © <a href="#" target="_blank">www.yangqq.com</a> All Rights Reserved. 备案号：<a
                        href="http://www.bootstrapmb.com/" target="_blank">蜀ICP备11002373号-1</a></p>
            </div>
        </div>
        <a href="#">
            <div class="top"></div>
        </a>
    </footer>
</div>
<script type="text/javascript">
    // console.log(document.getElementById("message"));
    // let message = document.getElementById("message");
    let app = new Vue({
        el: "#app",
        data() {
            return {
                userId: 1,
                articleDTO: {
                    content: ''
                },
                commentDTOs: [],
                a: '',
                id: '',
                comment:{
                    articleId: '10',
                    content: '你好啊',
                    like: true,
                    acceptId: '',
                    parentId: '0'
                }
            }
        },
        mounted() {
            this.id = this.getQueryString("id");
            console.log(this.id);
            this.getData();
        },
        methods: {
            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            open3(acceptId,parentId) {
                this.$prompt('请输入内容', '评论', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    this.comment.articleId = this.id;
                    this.comment.content = value;
                    this.comment.userId = this.userId;
                    this.comment.acceptId = acceptId;
                    this.comment.parentId = parentId;
                    console.log(this.comment);
                    axios.post("/comment/add",this.comment).then(res=>{
                        if(res.data.flag){
                            this.$message({
                                type: 'success',
                                message: '评论成功'
                            })
                        }
                    });
                    axios.get("/comment/" + this.id).then(res => {
                        console.log(res.data.data);
                        this.commentDTOs = res.data.data;
                        // console.log(this.commentDTOs)
                    })
                    // this.$message({
                    //     type: 'success',
                    //     message: '评论成功'
                    // });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            getData() {
                axios.get("/article/" + this.id).then(res => {
                    // console.log(res.data);
                    this.articleDTO = res.data.data;
                    this.a = res.data.data.content;
                    console.log(this.a);
                    console.log(this);
                    // this.a = marked(this.article.content);
                    // var testEditor;
                    $(function () {
                        editor = editormd.markdownToHTML("editormd1", {
                            // markdown: app.a,
                            htmlDecode: "style, script, iframe",
                            emoji: true,
                            taskList: true,
                            tex: true,  // 默认不解析
                            flowChart: true,  // 默认不解析
                            sequenceDiagram: true,  // 默认不解析
                            markdownSourceCode: true,
                            autoLoadKaTeX: true,
                            pageBreak: true,
                            atLink: true,    // for @link
                            emailLink: true,    // for mail address auto link// Github Flavored Markdown task lists
                            previewCodeHighlight: true
                        });
                    });
                    axios.get("/comment/" + this.id).then(res => {
                        console.log(res.data.data);
                        this.commentDTOs = res.data.data;
                    })
                })
            },
            thumbup(tid) {
                axios.get("/like/articleThumbup/" + tid + "/" + this.userId).then(res => {
                    if (res.data.flag) {
                        this.articleDTO.like = !this.articleDTO.like;
                        this.articleDTO.article.thumbup += 1;
                    }
                })
            },
            delthumbup(tid) {
                axios.get("/like/articleDelthumbup/" + tid + "/" + this.userId).then(res => {
                    if (res.data.flag) {
                        this.articleDTO.like = !this.articleDTO.like;
                        this.articleDTO.article.thumbup -= 1;
                    }
                })
            },
            thumbup1(tid, index, indexSon) {
                axios.get("/like/commentThumbup/" + tid + "/" + this.userId).then(res => {
                    if (res.data.flag) {
                        if (indexSon === null) {
                            this.commentDTOs[index].like = !this.commentDTOs[index].like;
                            this.commentDTOs[index].thumbup += 1;
                        }else {
                            this.commentDTOs[index].sons[indexSon].like = !this.commentDTOs[index].sons[indexSon].like;
                            this.commentDTOs[index].sons[indexSon].thumbup += 1;
                        }
                    }
                })
            },
            delthumbup1(tid, index, indexSon) {
                axios.get("/like/commentDelthumbup/" + tid + "/" + this.userId).then(res => {
                    if (res.data.flag) {
                        if (indexSon === null) {
                            this.commentDTOs[index].like = !this.commentDTOs[index].like;
                            this.commentDTOs[index].thumbup -= 1;
                        }else {
                            this.commentDTOs[index].sons[indexSon].like = !this.commentDTOs[index].sons[indexSon].like;
                            this.commentDTOs[index].sons[indexSon].thumbup -= 1;
                        }
                    }
                })
            },
            comment(acceptId,parentId,value){
                this.comment.articleId = this.id;
                this.comment.content = value;
                this.comment.userId = this.userId;
                this.comment.acceptId = acceptId;
                this.comment.parentId = parentId;
                axios.post("comment/add",this.comment).then(res=>{
                    console.log(res.data);
                })
            }
        }
    });


</script>

</body>
</html>
